<template>
  <div class="add-cate">
    <head-nav :cname="titleName"></head-nav>
    <div class="mshd">
      <div class="mszq-l">
        <span>添加分类</span>
      </div>
    </div>
    <div class="mszq-bdy">
      <el-form
        :model="addCateForm"
        :rules="addCateRules"
        ref="addCateRefs"
        label-width="100px"
        class="demo-ruleForm scFrom"
      >
        <el-form-item label="分类名称" prop="cateName">
          <el-input v-model="addCateForm.cateName"></el-input>
        </el-form-item>
        <el-form-item label="上级分类">
          <el-cascader
            v-model="addCateForm.superiorCate"
            :options="options"
            @change="superiorChange"
            :props="addCateProps"
          ></el-cascader>
          <p>不选择默认为顶级分类</p>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="addCateForm.Px"></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio v-model="addCateForm.isShow" label="1">是</el-radio>
          <el-radio v-model="addCateForm.isShow" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="导航栏显示">
          <el-radio v-model="addCateForm.isShowNav" label="1">是</el-radio>
          <el-radio v-model="addCateForm.isShowNav" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="选择模板">
          <el-cascader
            v-model="addCateForm.selectTemplate"
            :options="options1"
            @change="templatehandleChange"
            :props="templateProps"
          ></el-cascader>
        </el-form-item>
        <el-button type="primary" @click="btnSub">提交</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      options1: [],
      titleName: this.$route.query.name,
      addCateForm: {
        cateName: '',
        superiorCate: [],
        Px: '',
        selectTemplate: [],
        isShow: '1',
        isShowNav: '1'
      },
      addCateRules: {
        cateName: [
          { required: true, message: '请输入新增分类名称', tigger: blur }
        ]
      },
      addCateProps: {
        value: 'id',
        children: 'findSuperior',
        label: 'categoryName'
      },
      templateProps: {
        value: 'id',
        label: 'template_name'
      }
    }
  },
  methods: {
    templatehandleChange() {
      console.log(this.addCateForm.selectTemplate, '选择模板数据哦')
      console.log('选择模板哦')
    },
    superiorChange() {
      console.log(this.addCateForm.superiorCate, '选择上级分类数据哦')
      console.log('上级分类哦')
    },
    async getSelect() {
      const { data: res } = await this.$http.get('/commodity/findSuperior')
      console.log(res, 'dsadasda')
      if (res.Flag !== true) {
        return this.$Toast('获取失败', 'error')
      }
      // this.$Toast('获取上级分类数据成功', 'success')
      this.options = res.data
      console.log(this.options, 'super')
    },
    async getSelectTemplate() {
      const { data: res } = await this.$http.get('/commodity/findTemlate')
      if (res.Flag !== true) {
        return this.$Toast('获取模板数据失败', 'error')
      }
      // this.$Toast('获取模板数据成功', 'success')
      this.options1 = res.data
    },
    // 提交
    btnSub() {
      console.log('提交')
      this.$refs.addCateRefs.validate(async v => {
        // console.log(v, 'vvvvvv')
        if (!v) {
          return this.$Toast('请输入正确格式', 'error')
        }
        console.log(this.addCateForm, '当前输入的form')
        const { data: res } = await this.$http.post(
          '/commodity/addCommodity',
          this.addCateForm
        )
        console.log(res, 'asfasfasf')
        if (res.Flag !== true) {
          return this.$Toast('新增分类失败', 'error')
        }
        this.$Toast('新增分类成功', 'success')
        this.$router.history.push('/goods-cate?name=商品分类')
      })
    }
  },
  created() {
    this.getSelect()
    this.getSelectTemplate()
  }
}
</script>

<style lang="less" scope>
.scFrom {
  width: 450px;
  margin: 0 auto;
  padding-top: 30px;
}
.mszq-bdy {
  text-align: center;
  margin: 0 auto;
  width: 1100px;
  height: 500px;
  background: #fff;
}
</style>
